<template>
  <div class="rightBar">
    <div @click="closeMainWindow" class="closeButton"></div>
    <div @click="minimizeMainWindow" class="minimizeButton"></div>
  </div>
</template>

<script>

const { ipcRenderer } = window.require("electron");

export default {
	name: "right-bar",
	methods: {
    closeMainWindow() {
      ipcRenderer.send("closeMainWindow");
    },

    minimizeMainWindow() {
      ipcRenderer.send("minimizeMainWindow");
    }
  },
};
</script>

<style>
.rightBar {
  width: 40px;
  height: 800px;
  float: right;
  border-radius: 0 20px 20px 0;
}

.closeButton {
  margin-left: 10px;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

.closeButton:hover {
  background-color: transparent;
  background-image: url('../../assets/closeButton.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
  box-shadow: 0 0 15px #7e57c2;
  cursor: pointer;
}

.closeButton:active {
  transform: scale(1.5);
}

.minimizeButton {
  margin-left: 10px;
  margin-top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: orange;
}

.minimizeButton:hover {
  background-color: transparent;
  background-image: url('../../assets/minimizeButton.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
  box-shadow: 0 0 15px #7e57c2;
  cursor: pointer;
}

.minimizeButton:active {
  transform: scale(1.5);
}
</style>
